<div *ngIf="(dashboardItems | async).length === 0" class="no-items">
  <h1>There are no charts on this dashboard</h1>

  <a routerLink="/explore" mat-button mat-raised-button color="primary"
    >Add Chart</a
  >
</div>

<div
  *ngIf="(dashboardItems | async).length > 0"
  style="min-height: 100%; width: 100%"
>
  <gridster [options]="options" style="background-color: #dadada">
    <gridster-item
      *ngFor="let item of dashboardItems | async"
      [item]="item.plain.layout"
    >
      <query-renderer
        [cubeQuery]="item.cubeQuery"
        [chartType]="item.chartType"
        [pivotConfig]="item.pivotConfig"
      >
        <div style="margin-right: 12px">
          <button
            mat-button
            mat-icon-button
            mat-raised-button
            [matMenuTriggerFor]="menu"
            color="primary"
          >
            <mat-icon>menu</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="editItem(item.id, item.plain)">
              Edit
            </button>
            <button mat-menu-item (click)="deleteItem(item.id)">Delete</button>
          </mat-menu>
        </div>
      </query-renderer>
    </gridster-item>
  </gridster>
</div>
